<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>叶序画廊 - 艺术与自然的对话</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入字体 Awesome 用于图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="logo">
            <h1>叶序</h1>
        </div>
        <nav>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="shuye.html">树叶</a></li>
                <li><a href="zhoubian.html">周边</a></li>
                <li><a href="huaxiang.html" class="active">画廊</a></li>
            </ul>
        </nav>
        <div class="hamburger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </header>
    <style>
        /* 画廊页面特有样式 */
        .gallery-header {
            position: relative;
            padding: 180px 0 120px;
            background-color: #f5f9f7;
            text-align: center;
            overflow: hidden;
        }
        
        .gallery-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%233a7d44" fill-opacity="0.05" d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"></path></svg>');
            z-index: 0;
        }
        
        .gallery-header h1 {
            font-size: 3.5rem;
            color: var(--primary-color);
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        
        .gallery-header p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        /* 画廊过滤器 */
        .gallery-filters {
            padding: 60px 0 30px;
            background-color: white;
            text-align: center;
        }
        
        .filter-tabs {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 40px;
        }
        
        .filter-tab {
            padding: 10px 25px;
            background-color: var(--light-color);
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
        }
        
        .filter-tab:hover,
        .filter-tab.active {
            background-color: var(--primary-color);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(58, 125, 68, 0.2);
        }
        
        /* 画廊网格 */
        .gallery-grid {
            padding: 0 0 100px;
            background-color: white;
        }
        
        .gallery-items {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            cursor: pointer;
            height: 350px;
            transition: var(--transition);
        }
        
        .gallery-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }
        
        .gallery-item:hover img {
            transform: scale(1.08);
        }
        
        .gallery-item-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
            opacity: 0;
            transition: opacity 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 30px;
        }
        
        .gallery-item:hover .gallery-item-overlay {
            opacity: 1;
        }
        
        .gallery-item-category {
            color: var(--accent-color);
            font-size: 0.9rem;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .gallery-item-title {
            color: white;
            font-size: 1.3rem;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .gallery-item-description {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        .gallery-item:hover .gallery-item-description {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.2s;
        }
        
        /* 特色展览 */
        .featured-exhibition {
            padding: 120px 0;
            background-color: var(--light-color);
            position: relative;
            overflow: hidden;
        }
        
        .featured-exhibition::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="%233a7d44" fill-opacity="0.03" d="M39.5,-67.4C51.7,-61.5,62.1,-48.7,69.3,-33.9C76.5,-19.1,80.5,-2.3,78.7,13.2C76.9,28.6,69.3,43,57.2,53.1C45,63.1,28.4,68.8,11.4,70.2C-5.6,71.7,-22.8,68.9,-37.4,61.6C-52,54.3,-64,42.5,-69.7,28.7C-75.3,14.8,-74.6,-0.8,-70.1,-16.1C-65.6,-31.4,-57.4,-46.4,-44.7,-55.2C-31.9,-64,-14.9,-66.6,1.4,-71.3C17.7,-76,35.4,-82.9,39.5,-67.4Z" transform="translate(100 100)" /></svg>');
            background-size: cover;
            opacity: 0.6;
            z-index: 0;
        }
        
        .featured-exhibition .container {
            position: relative;
            z-index: 1;
        }
        
        .exhibition-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .exhibition-header h2 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }
        
        .exhibition-header h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: var(--accent-color);
        }
        
        .exhibition-header p {
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto;
            color: var(--text-color);
        }
        
        .exhibition-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 50px;
        }
        
        .exhibition-image {
            flex: 1;
            min-width: 300px;
            height: 500px;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }
        
        .exhibition-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s ease;
        }
        
        .exhibition-content:hover .exhibition-image img {
            transform: scale(1.05);
        }
        
        .exhibition-details {
            flex: 1;
            min-width: 300px;
        }
        
        .exhibition-date {
            display: inline-block;
            background-color: var(--accent-color);
            color: white;
            padding: 8px 16px;
            border-radius: var(--border-radius);
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        .exhibition-details h3 {
            font-size: 2rem;
            color: var(--dark-color);
            margin-bottom: 25px;
        }
        
        .exhibition-details p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 30px;
            color: var(--text-color);
        }
        
        .exhibition-info {
            margin-bottom: 30px;
        }
        
        .info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .info-item i {
            color: var(--primary-color);
            margin-right: 15px;
            margin-top: 5px;
        }
        
        .info-content h4 {
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .info-content p {
            margin: 0;
            font-size: 1rem;
        }
        
        /* 艺术家专区 */
        .artists-section {
            padding: 120px 0;
            background-color: white;
        }
        
        .artists-header {
            text-align: center;
            margin-bottom: 80px;
        }
        
        .artists-header h2 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }
        
        .artists-header h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: var(--accent-color);
        }
        
        .artists-header p {
            font-size: 1.1rem;
            max-width: 800px;
            margin: 0 auto;
            color: var(--text-color);
        }
        
        .artists-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            margin-bottom: 60px;
        }
        
        .artist-card {
            text-align: center;
            transition: var(--transition);
            padding: 30px 20px;
            border-radius: var(--border-radius);
            background-color: white;
            box-shadow: var(--shadow);
        }
        
        .artist-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .artist-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 25px;
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }
        
        .artist-card:hover .artist-image {
            transform: scale(1.05);
        }
        
        .artist-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .artist-name {
            font-size: 1.4rem;
            color: var(--dark-color);
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .artist-specialty {
            color: var(--primary-color);
            margin-bottom: 20px;
            font-size: 1rem;
        }
        
        .artist-bio {
            color: var(--text-color);
            margin-bottom: 25px;
            font-size: 0.95rem;
            line-height: 1.6;
        }
        
        .artist-social {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .artist-social a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--light-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            transition: var(--transition);
        }
        
        .artist-social a:hover {
            background-color: var(--primary-color);
            color: white;
            transform: translateY(-3px);
        }
        
        /* 作品详情模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 9999;
            overflow: auto;
        }
        
        .modal-content {
            position: relative;
            max-width: 1200px;
            margin: 30px auto;
            background-color: white;
            border-radius: var(--border-radius);
            overflow: hidden;
        }
        
        .modal-header {
            padding: 20px;
            background-color: var(--light-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .modal-close {
            font-size: 1.5rem;
            color: var(--dark-color);
            cursor: pointer;
            transition: var(--transition);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .modal-close:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        .modal-body {
            display: flex;
            flex-wrap: wrap;
        }
        
        .modal-image {
            flex: 1;
            min-width: 300px;
            height: auto;
        }
        
        .modal-image img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        
        .modal-details {
            flex: 1;
            min-width: 300px;
            padding: 40px;
        }
        
        .modal-category {
            color: var(--accent-color);
            font-size: 0.9rem;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .modal-title {
            font-size: 2rem;
            color: var(--dark-color);
            margin-bottom: 20px;
            font-weight: 700;
        }
        
        .modal-description {
            color: var(--text-color);
            margin-bottom: 30px;
            line-height: 1.8;
        }
        
        .modal-info {
            margin-bottom: 30px;
        }
        
        .modal-actions {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        /* 订阅部分 */
        .subscribe-section {
            padding: 100px 0;
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .subscribe-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="%23ffffff" fill-opacity="0.05" d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z"></path></svg>');
        }
        
        .subscribe-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .subscribe-content h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        .subscribe-content p {
            font-size: 1.1rem;
            margin-bottom: 40px;
        }
        
        .subscribe-form {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
        }
        
        .subscribe-form input {
            padding: 15px 20px;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1rem;
            flex: 1;
            min-width: 300px;
            max-width: 500px;
        }
        
        .subscribe-form button {
            padding: 15px 30px;
            background-color: var(--accent-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .subscribe-form button:hover {
            background-color: #d48936;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(212, 137, 54, 0.3);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .gallery-header {
                padding: 150px 0 100px;
            }
            
            .gallery-header h1 {
                font-size: 2.8rem;
            }
            
            .gallery-items {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            }
            
            .gallery-item {
                height: 300px;
            }
            
            .exhibition-content,
            .modal-body {
                gap: 30px;
            }
            
            .exhibition-details h3,
            .modal-title,
            .artists-header h2,
            .exhibition-header h2,
            .subscribe-content h2 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 576px) {
            .gallery-header h1 {
                font-size: 2.2rem;
            }
            
            .gallery-items {
                grid-template-columns: 1fr;
            }
            
            .filter-tabs {
                gap: 10px;
            }
            
            .filter-tab {
                padding: 8px 20px;
                font-size: 0.9rem;
            }
            
            .exhibition-image {
                height: 350px;
            }
            
            .exhibition-details h3,
            .modal-title,
            .artists-header h2,
            .exhibition-header h2,
            .subscribe-content h2 {
                font-size: 1.8rem;
            }
            
            .modal-details {
                padding: 20px;
            }
            
            .subscribe-form input {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="logo">
            <h1>叶序</h1>
        </div>
        <nav>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="shuye.html">树叶</a></li>
                <li><a href="zhoubian.html">周边</a></li>
                <li><a href="huaxiang.html" class="active">画廊</a></li>
            </ul>
        </nav>
        <div class="hamburger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </header>

    <!-- 页面头部 -->
    <section class="gallery-header">
        <div class="container">
            <h1>叶序画廊</h1>
            <p>探索自然之美与艺术的完美融合，每一幅作品都展现了树叶排列的数学奥秘</p>
        </div>
    </section>

    <!-- 画廊过滤器 -->
    <section class="gallery-filters">
        <div class="container">
            <div class="filter-tabs">
                <div class="filter-tab active" data-filter="all">全部作品</div>
                <div class="filter-tab" data-filter="photography">摄影作品</div>
                <div class="filter-tab" data-filter="painting">绘画作品</div>
                <div class="filter-tab" data-filter="digital">数字艺术</div>
                <div class="filter-tab" data-filter="sculpture">雕塑作品</div>
                <div class="filter-tab" data-filter="installation">装置艺术</div>
            </div>
        </div>
    </section>

    <!-- 画廊网格 -->
    <section class="gallery-grid">
        <div class="container">
            <div class="gallery-items">
                <!-- 作品1 -->
                <div class="gallery-item" data-category="photography">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect width='400' height='400' fill='%23f8f9fa'/><circle cx='200' cy='200' r='180' fill='%23f1f3f5'/><path d='M200 40 L250 120 L350 140 L310 220 L330 320 L200 280 L70 320 L90 220 L50 140 L150 120 Z' fill='%23e9ecef'/><circle cx='200' cy='200' r='10' fill='%233a7d44'/><path d='M200 40 L200 190 M250 120 L220 190 M350 140 L280 190 M310 220 L260 200 M330 320 L230 250 M200 280 L200 210 M70 320 L170 250 M90 220 L140 200 M50 140 L120 190 M150 120 L180 190' stroke='%233a7d44' stroke-width='3' fill='none'/></svg>" alt="向日葵花盘">
                    <div class="gallery-item-overlay">
                        <div class="gallery-item-category">摄影作品</div>
                        <h3 class="gallery-item-title">向日葵的秘密</h3>
                        <p class="gallery-item-description">特写镜头下的向日葵花盘，展示了斐波那契螺旋排列的完美数学结构。</p>
                    </div>
                </div>
                
                <!-- 作品2 -->
                <div class="gallery-item" data-category="painting">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect width='400' height='400' fill='%23f8f9fa'/><path d='M200 20 L220 60 L260 60 L240 90 L250 120 L220 110 L190 130 L180 100 L150 90 L170 60 L210 60 Z' fill='%2386b875'/><path d='M200 150 L220 190 L260 190 L240 220 L250 250 L220 240 L190 260 L180 230 L150 220 L170 190 L210 190 Z' fill='%235c8d68'/><path d='M200 280 L220 320 L260 320 L240 350 L250 380 L220 370 L190 390 L180 360 L150 350 L170 320 L210 320 Z' fill='%233a7d44'/><path d='M200 20 L200 380' stroke='%232a5934' stroke-width='2' stroke-dasharray='5,5'/><path d='M50 200 L350 200' stroke='%232a5934' stroke-width='2' stroke-dasharray='5,5'/></svg>" alt="叶序水彩画">
                    <div class="gallery-item-overlay">
                        <div class="gallery-item-category">绘画作品</div>
                        <h3 class="gallery-item-title">叶序三重奏</h3>
                        <p class="gallery-item-description">水彩画作品，以三种不同色调展现了叶序排列的层次美感和韵律。</p>
                    </div>
                </div>
                
                <!-- 作品3 -->
                <div class="gallery-item" data-category="digital">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect width='400' height='400' fill='%23f8f9fa'/><circle cx='200' cy='200' r='180' fill='none' stroke='%233a7d44' stroke-width='2'/><circle cx='200' cy='200' r='150' fill='none' stroke='%233a7d44' stroke-width='2'/><circle cx='200' cy='200' r='120' fill='none' stroke='%233a7d44' stroke-width='2'/><circle cx='200' cy='200' r='90' fill='none' stroke='%233a7d44' stroke-width='2'/><circle cx='200' cy='200' r='60' fill='none' stroke='%233a7d44' stroke-width='2'/><circle cx='200' cy='200' r='30' fill='%233a7d44'/><circle cx='332' cy='200' r='5' fill='%23d4a76a'/><circle cx='283' cy='323' r='5' fill='%23d4a76a'/><circle cx='117' cy='323' r='5' fill='%23d4a76a'/><circle cx='68' cy='200' r='5' fill='%23d4a76a'/><circle cx='117' cy='77' r='5' fill='%23d4a76a'/><circle cx='283' cy='77' r='5' fill='%23d4a76a'/><circle cx='257' cy='288' r='5' fill='%2386b875'/><circle cx='143' cy='288' r='5' fill='%2386b875'/><circle cx='125' cy='170' r='5' fill='%2386b875'/><circle cx='168' cy='257' r='5' fill='%2386b875'/><circle cx='232' cy='257' r='5' fill='%2386b875'/><circle cx='275' cy='170' r='5' fill='%2386b875'/><circle cx='257' cy='112' r='5' fill='%2386b875'/><circle cx='143' cy='112' r='5' fill='%2386b875'/><circle cx='168' cy='43' r='5' fill='%2386b875'/><circle cx='232' cy='43' r='5' fill='%2386b875'/><circle cx='283' cy='136' r='5' fill='%235c8d68'/><circle cx='217' cy='167' r='5' fill='%235c8d68'/><circle cx='183' cy='167' r='5' fill='%235c8d68'/><circle cx='117' cy='136' r='5' fill='%235c8d68'/><circle cx='136' cy='178' r='5' fill='%235c8d68'/><circle cx='264' cy='178' r='5' fill='%235c8d68'/><circle cx='248' cy='200' r='5' fill='%235c8d68'/><circle cx='177' cy='229' r='5' fill='%235c8d68'/><circle cx='223' cy='229' r='5' fill='%235c8d68'/><circle cx='152' cy='200' r='5' fill='%235c8d68'/><circle cx='210' cy='86' r='5' fill='%235c8d68'/><circle cx='190' cy='86' r='5' fill='%235c8d68'/><circle cx='229' cy='116' r='5' fill='%235c8d68'/><circle cx='171' cy='116' r='5' fill='%235c8d68'/><circle cx='250' cy='68' r='5' fill='%235c8d68'/><circle cx='150' cy='68' r='5' fill='%235c8d68'/></svg>" alt="黄金角数字艺术">
                    <div class="gallery-item-overlay">
                        <div class="gallery-item-category">数字艺术</div>
                        <h3 class="gallery-item-title">黄金角的韵律</h3>
                        <p class="gallery-item-description">基于137.5°黄金角创建的数字艺术作品，展示了自然界中普遍存在的数学和谐。</p>
                    </div>
                </div>
                
                <!-- 作品4 -->
                <div class="gallery-item" data-category="sculpture">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect width='400' height='400' fill='%23f8f9fa'/><path d='M200 50 L250 100 L300 150 L300 250 L250 300 L200 350 L150 300 L100 250 L100 150 L150 100 Z' fill='none' stroke='%233a7d44' stroke-width='3'/><path d='M200 100 L225 150 L250 200 L225 250 L200 300 L175 250 L150 200 L175 150 Z' fill='none' stroke='%235c8d68' stroke-width='3'/><path d='M200 150 L212 200 L225 250 L200 225 L175 250 L187 200 Z' fill='none' stroke='%2386b875' stroke-width='3'/><path d='M200 50 L200 350' stroke='%23d4a76a' stroke-width='1' stroke-dasharray='5,5'/><path d='M100 200 L300 200' stroke='%23d4a76a' stroke-width='1' stroke-dasharray='5,5'/></svg>" alt="叶序雕塑">
                    <div class="gallery-item-overlay">
                        <div class="gallery-item-category">雕塑作品</div>
                        <h3 class="gallery-item-title">层叠的自然</h3>
                        <p class="gallery-item-description">金属材质的叶序雕塑作品，通过多层次结构展现了植物生长的螺旋规律。</p>
                    </div>
                </div>
                
                <!-- 作品5 -->
                <div class="gallery-item" data-category="photography">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect width='400' height='400' fill='%23f8f9fa'/><path d='M200 30 L280 60 L350 130 L320 210 L280 280 L200 320 L120 280 L80 210 L50 130 L120 60 Z' fill='none' stroke='%233a7d44' stroke-width='3' fill='%23f1f3f5'/><path d='M200 30 C250 80 300 130 280 190 C260 250 200 280 150 250 C100 220 120 150 150 100 C180 50 160 50 200 30 Z' fill='none' stroke='%235c8d68' stroke-width='2'/><path d='M200 30 C230 70 250 110 240 150 C230 190 200 220 170 210 C140 200 150 150 170 110 C190 70 180 40 200 30 Z' fill='none' stroke='%2386b875' stroke-width='2'/><circle cx='200' cy='120' r='10' fill='%23d4a76a'/></svg>" alt="松果特写">
                    <div class="gallery-item-overlay">
                        <div class="gallery-item-category">摄影作品</div>
                        <h3 class="gallery-item-title">松果的螺旋之美</h3>
                        <p class="gallery-item-description">高清微距摄影，捕捉松果表面鳞片的精美螺旋排列，展示自然界的数学之美。</p>
                    </div>
                </div>
                
                <!-- 作品6 -->
                <div class="gallery-item" data-category="installation">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect width='400' height='400' fill='%23f8f9fa'/><circle cx='200' cy='200' r='180' fill='none' stroke='%233a7d44' stroke-width='2'/><path d='M200 50 L230 90 L280 100 L250 150 L260 200 L200 180 L140 200 L150 150 L120 100 L170 90 Z' fill='none' stroke='%235c8d68' stroke-width='4'/><path d='M200 100 L220 130 L250 140 L230 170 L240 200 L200 190 L160 200 L170 170 L150 140 L180 130 Z' fill='none' stroke='%2386b875' stroke-width='3'/><path d='M200 150 L210 170 L230 175 L220 185 L225 200 L200 195 L175 200 L180 185 L170 175 L190 170 Z' fill='none' stroke='%23d4a76a' stroke-width='2'/><circle cx='200' cy='50' r='10' fill='%233a7d44'/><circle cx='100' cy='200' r='10' fill='%233a7d44'/><circle cx='300' cy='200' r='10' fill='%233a7d44'/><circle cx='200' cy='350' r='10' fill='%233a7d44'/><circle cx='63' cy='63' r='10' fill='%235c8d68'/><circle cx='337' cy='63' r='10' fill='%235c8d68'/><circle cx='337' cy='337' r='10' fill='%235c8d68'/><circle cx='63' cy='337' r='10' fill='%235c8d68'/></svg>" alt="叶序装置艺术">
                    <div class="gallery-item-overlay">
                        <div class="gallery-item-category">装置艺术</div>
                        <h3 class="gallery-item-title">生长的韵律</h3>
                        <p class="gallery-item-description">互动装置艺术作品，通过光影效果和声音反馈，让观众体验叶序生长的韵律。</p>
                    </div>
                </div>
                
                <!-- 作品7 -->
                <div class="gallery-item" data-category="painting">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect width='400' height='400' fill='%23f8f9fa'/><path d='M100 200 C150 100 250 100 300 200 C350 300 250 300 200 200 C150 100 250 100 300 200 Z' fill='%2386b875' fill-opacity='0.3'/><path d='M100 200 C150 100 250 100 300 200 C350 300 250 300 200 200' fill='none' stroke='%233a7d44' stroke-width='2'/><path d='M150 200 C175 150 225 150 250 200 C275 250 225 250 200 200' fill='none' stroke='%235c8d68' stroke-width='2'/><path d='M175 200 C187 175 213 175 225 200 C237 225 213 225 200 200' fill='none' stroke='%2386b875' stroke-width='2'/><path d='M50 200 L350 200' stroke='%23d4a76a' stroke-width='1' stroke-dasharray='5,5'/></svg>" alt="叶序抽象画">
                    <div class="gallery-item-overlay">
                        <div class="gallery-item-category">绘画作品</div>
                        <h3 class="gallery-item-title">自然的曲线</h3>
                        <p class="gallery-item-description">抽象油画作品，通过流畅的曲线和渐变色彩，诠释了叶序排列的数学韵律。</p>
                    </div>
                </div>
                
                <!-- 作品8 -->
                <div class="gallery-item" data-category="digital">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect width='400' height='400' fill='%23f8f9fa'/><circle cx='200' cy='200' r='180' fill='none' stroke='%233a7d44' stroke-width='2'/><path d='M200 20 L215 60 L250 90 L230 130 L260 160 L230 190 L240 230 L200 220 L160 230 L170 190 L140 160 L170 130 L150 90 L185 60 Z' fill='none' stroke='%235c8d68' stroke-width='2'/><path d='M200 70 L210 95 L225 115 L215 135 L225 155 L210 175 L215 195 L200 190 L185 195 L190 175 L175 155 L185 135 L175 115 L190 95 Z' fill='none' stroke='%2386b875' stroke-width='2'/><path d='M200 120 L205 135 L213 148 L208 158 L213 168 L205 178 L207 185 L200 183 L193 185 L195 178 L187 168 L192 158 L187 148 L195 135 Z' fill='none' stroke='%23d4a76a' stroke-width='2'/><circle cx='200' cy='20' r='5' fill='%233a7d44'/><circle cx='260' cy='160' r='5' fill='%233a7d44'/><circle cx='140' cy='160' r='5' fill='%233a7d44'/><circle cx='200' cy='380' r='5' fill='%233a7d44'/><circle cx='230' cy='190' r='3' fill='%2386b875'/><circle cx='170' cy='190' r='3' fill='%2386b875'/><circle cx='215' cy='135' r='3' fill='%2386b875'/><circle cx='185' cy='135' r='3' fill='%2386b875'/><circle cx='210' cy='175' r='2' fill='%23d4a76a'/><circle cx='190' cy='175' r='2' fill='%23d4a76a'/><circle cx='208' cy='158' r='2' fill='%23d4a76a'/><circle cx='192' cy='158' r='2' fill='%23d4a76a'/></svg>" alt="分形叶序艺术">
                    <div class="gallery-item-overlay">
                        <div class="gallery-item-category">数字艺术</div>
                        <h3 class="gallery-item-title">分形叶序</h3>
                        <p class="gallery-item-description">基于分形算法生成的数字艺术作品，展示了叶序模式在不同尺度上的自相似性。</p>
                    </div>
                </div>
                
                <!-- 作品9 -->
                <div class="gallery-item" data-category="sculpture">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><rect width='400' height='400' fill='%23f8f9fa'/><path d='M200 50 L250 100 L300 150 L300 250 L250 300 L200 350 L150 300 L100 250 L100 150 L150 100 Z' fill='none' stroke='%233a7d44' stroke-width='2'/><path d='M200 100 L225 150 L250 200 L225 250 L200 300 L175 250 L150 200 L175 150 Z' fill='none' stroke='%235c8d68' stroke-width='2'/><path d='M200 150 L212 200 L225 250 L200 225 L175 250 L187 200 Z' fill='none' stroke='%2386b875' stroke-width='2'/><circle cx='200' cy='50' r='8' fill='%233a7d44'/><circle cx='150' cy='100' r='8' fill='%233a7d44'/><circle cx='250' cy='100' r='8' fill='%233a7d44'/><circle cx='100' cy='150' r='8' fill='%233a7d44'/><circle cx='300' cy='150' r='8' fill='%233a7d44'/><circle cx='150' cy='300' r='8' fill='%233a7d44'/><circle cx='250' cy='300' r='8' fill='%233a7d44'/><circle cx='200' cy='350' r='8' fill='%233a7d44'/><circle cx='175' cy='250' r='6' fill='%235c8d68'/><circle cx='225' cy='250' r='6' fill='%235c8d68'/><circle cx='250' cy='200' r='6' fill='%235c8d68'/><circle cx='150' cy='200' r='6' fill='%235c8d68'/><circle cx='187' cy='200' r='4' fill='%2386b875'/><circle cx='212' cy='200' r='4' fill='%2386b875'/><circle cx='200' cy='150' r='4' fill='%2386b875'/><circle cx='200' cy='300' r='4' fill='%2386b875'/></svg>" alt="金属叶序雕塑">
                    <div class="gallery-item-overlay">
                        <div class="gallery-item-category">雕塑作品</div>
                        <h3 class="gallery-item-title">金属之叶</h3>
                        <p class="gallery-item-description">不锈钢材质的几何叶序雕塑，通过精确的角度和比例，展现了自然界的秩序美感。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 特色展览 -->
    <section class="featured-exhibition">
        <div class="container">
            <div class="exhibition-header">
                <h2>当前展览</h2>
                <p>探索自然与艺术的交融，感受叶序的数学之美</p>
            </div>
            
            <div class="exhibition-content">
                <div class="exhibition-image">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='800' viewBox='0 0 600 800'><rect width='600' height='800' fill='%23f8f9fa'/><circle cx='300' cy='400' r='350' fill='none' stroke='%233a7d44' stroke-width='3'/><path d='M300 50 L350 130 L450 150 L410 230 L430 330 L300 290 L170 330 L190 230 L150 150 L250 130 Z' fill='none' stroke='%235c8d68' stroke-width='4'/><path d='M300 130 L325 190 L375 210 L340 270 L360 330 L300 305 L240 330 L260 270 L230 210 L275 190 Z' fill='none' stroke='%2386b875' stroke-width='3'/><path d='M300 210 L315 250 L345 265 L325 290 L335 315 L300 300 L265 315 L275 290 L255 265 L285 250 Z' fill='none' stroke='%23d4a76a' stroke-width='2'/><circle cx='300' cy='400' r='10' fill='%233a7d44'/><path d='M300 50 L300 390 M350 130 L320 390 M450 150 L350 390 M410 230 L370 390 M430 330 L330 370 M300 290 L300 370 M170 330 L270 370 M190 230 L230 390 M150 150 L250 390 M250 130 L280 390' stroke='%233a7d44' stroke-width='1' stroke-dasharray='5,5'/><circle cx='300' cy='50' r='15' fill='%233a7d44'/><circle cx='150' cy='150' r='15' fill='%233a7d44'/><circle cx='450' cy='150' r='15' fill='%233a7d44'/><circle cx='170' cy='330' r='15' fill='%233a7d44'/><circle cx='430' cy='330' r='15' fill='%233a7d44'/><circle cx='300' cy='570' r='15' fill='%233a7d44'/><circle cx='325' cy='190' r='12' fill='%2386b875'/><circle cx='275' cy='190' r='12' fill='%2386b875'/><circle cx='375' cy='210' r='12' fill='%2386b875'/><circle cx='230' cy='210' r='12' fill='%2386b875'/><circle cx='340' cy='270' r='12' fill='%2386b875'/><circle cx='260' cy='270' r='12' fill='%2386b875'/><circle cx='360' cy='330' r='12' fill='%2386b875'/><circle cx='240' cy='330' r='12' fill='%2386b875'/><circle cx='315' cy='250' r='8' fill='%23d4a76a'/><circle cx='285' cy='250' r='8' fill='%23d4a76a'/><circle cx='345' cy='265' r='8' fill='%23d4a76a'/><circle cx='255' cy='265' r='8' fill='%23d4a76a'/><circle cx='335' cy='315' r='8' fill='%23d4a76a'/><circle cx='265' cy='315' r='8' fill='%23d4a76a'/><circle cx='325' cy='290' r='6' fill='%233a7d44'/><circle cx='275' cy='290' r='6' fill='%233a7d44'/></svg>' alt="叶序：自然的数学">
                </div>
                <div class="exhibition-details">
                    <div class="exhibition-date">2024年6月1日 - 2024年8月31日</div>
                    <h3>叶序：自然的数学之美</h3>
                    <p>本次展览邀请了来自世界各地的艺术家，通过不同媒介展现植物叶序排列的数学奥秘。从摄影作品到雕塑装置，从传统绘画到数字艺术，多角度呈现自然界中普遍存在的斐波那契数列和黄金比例。</p>
                    <p>展览分为四个主题区域：自然观察、数学解析、艺术表达和互动体验，让观众在欣赏艺术作品的同时，深入了解植物生长的科学原理和美学价值。</p>
                    
                    <div class="exhibition-info">
                        <div class="info-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <div class="info-content">
                                <h4>展览地点</h4>
                                <p>叶序艺术馆，北京市朝阳区798艺术区</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-clock"></i>
                            <div class="info-content">
                                <h4>开放时间</h4>
                                <p>周二至周日 10:00 - 18:00（17:30停止入场）</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-ticket-alt"></i>
                            <div class="info-content">
                                <h4>门票信息</h4>
                                <p>成人票：¥80 | 学生票：¥40 | 团体票：¥60/人（10人以上）</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="exhibition-actions">
                        <button class="btn-primary">预约参观</button>
                        <button class="btn-secondary">了解更多</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 艺术家专区 -->
    <section class="artists-section">
        <div class="container">
            <div class="artists-header">
                <h2>参展艺术家</h2>
                <p>来自世界各地的艺术家，用独特的视角诠释叶序之美</p>
            </div>
            
            <div class="artists-grid">
                <!-- 艺术家1 -->
                <div class="artist-card">
                    <div class="artist-image">
                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><circle cx='150' cy='150' r='150' fill='%2386b875'/><circle cx='150' cy='130' r='100' fill='%23e9ecef'/><circle cx='120' cy='110' r='15' fill='%233a7d44'/><circle cx='180' cy='110' r='15' fill='%233a7d44'/><path d='M120 160 Q150 180 180 160' stroke='%233a7d44' stroke-width='3' fill='none'/></svg>" alt="李明">
                    </div>
                    <h3 class="artist-name">李明</h3>
                    <div class="artist-specialty">摄影艺术家</div>
                    <p class="artist-bio">专注于植物微观摄影20年，通过高清微距镜头揭示植物生长的数学奥秘和结构之美。</p>
                    <div class="artist-social">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fas fa-globe"></i></a>
                    </div>
                </div>
                
                <!-- 艺术家2 -->
                <div class="artist-card">
                    <div class="artist-image">
                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><circle cx='150' cy='150' r='150' fill='%235c8d68'/><circle cx='150' cy='130' r='100' fill='%23f1f3f5'/><circle cx='120' cy='110' r='15' fill='%233a7d44'/><circle cx='180' cy='110' r='15' fill='%233a7d44'/><path d='M110 170 Q150 180 190 170' stroke='%233a7d44' stroke-width='3' fill='none'/><path d='M130 80 Q170 60 170 80' stroke='%233a7d44' stroke-width='2' fill='none' transform='rotate(-30 150 100)'/></svg>" alt="Sarah Johnson">
                    </div>
                    <h3 class="artist-name">Sarah Johnson</h3>
                    <div class="artist-specialty">数字艺术家</div>
                    <p class="artist-bio">结合数学算法与艺术创作，通过生成艺术探索自然界中的分形图案和自相似性。</p>
                    <div class="artist-social">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fas fa-globe"></i></a>
                    </div>
                </div>
                
                <!-- 艺术家3 -->
                <div class="artist-card">
                    <div class="artist-image">
                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><circle cx='150' cy='150' r='150' fill='%233a7d44'/><circle cx='150' cy='130' r='100' fill='%23f8f9fa'/><circle cx='120' cy='110' r='15' fill='%233a7d44'/><circle cx='180' cy='110' r='15' fill='%233a7d44'/><path d='M120 160 Q150 170 180 160' stroke='%233a7d44' stroke-width='3' fill='none'/></svg>" alt="王建国">
                    </div>
                    <h3 class="artist-name">王建国</h3>
                    <div class="artist-specialty">雕塑家</div>
                    <p class="artist-bio">以金属为主要创作媒介，通过几何结构和精确计算，创作展现自然秩序的雕塑作品。</p>
                    <div class="artist-social">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fas fa-globe"></i></a>
                    </div>
                </div>
                
                <!-- 艺术家4 -->
                <div class="artist-card">
                    <div class="artist-image">
                        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><circle cx='150' cy='150' r='150' fill='%23d4a76a'/><circle cx='150' cy='130' r='100' fill='%23e9ecef'/><circle cx='120' cy='110' r='15' fill='%233a7d44'/><circle cx='180' cy='110' r='15' fill='%233a7d44'/><path d='M110 170 Q150 190 190 170' stroke='%233a7d44' stroke-width='3' fill='none'/><path d='M100 100 Q200 100 200 110' stroke='%233a7d44' stroke-width='2' fill='none' transform='rotate(-10 150 120)'/></svg>" alt="Emma Thompson">
                    </div>
                    <h3 class="artist-name">Emma Thompson</h3>
                    <div class="artist-specialty">装置艺术家</div>
                    <p class="artist-bio">创作互动式装置艺术，融合光影、声音和空间，让观众沉浸式体验自然的数学韵律。</p>
                    <div class="artist-social">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fas fa-globe"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 订阅部分 -->
    <section class="subscribe-section">
        <div class="container">
            <div class="subscribe-content">
                <h2>订阅我们的展览信息</h2>
                <p>第一时间获取最新展览资讯、艺术家访谈和特别活动邀请</p>
                <form class="subscribe-form">
                    <input type="email" placeholder="请输入您的邮箱地址" required>
                    <button type="submit">立即订阅</button>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h2>叶序</h2>
                    <p>艺术与自然的和谐</p>
                </div>
                <div class="footer-links">
                    <h3>导航</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="shuye.html">树叶</a></li>
                        <li><a href="zhoubian.html">周边</a></li>
                        <li><a href="huaxiang.html">画廊</a></li>
                    </ul>
                </div>
                <div class="footer-social">
                    <h3>关注我们</h3>
                    <ul>
                        <li><a href="#"><i class="fab fa-weibo"></i></a></li>
                        <li><a href="#"><i class="fab fa-weixin"></i></a></li>
                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系我们</h3>
                    <p>邮箱：info@yexu.com</p>
                    <p>电话：123-4567-8910</p>
                </div>
            </div>
            <div class="footer-copyright">
                <p>&copy; 2025 叶序艺术. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 作品详情模态框 -->
    <div class="modal" id="artworkModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>作品详情</h3>
                <div class="modal-close" id="closeModal">&times;</div>
            </div>
            <div class="modal-body">
                <div class="modal-image" id="modalImage">
                    <img src="" alt="作品图片">
                </div>
                <div class="modal-details">
                    <div class="modal-category" id="modalCategory"></div>
                    <h3 class="modal-title" id="modalTitle"></h3>
                    <p class="modal-description" id="modalDescription">
                        详细描述内容将在这里显示，包括艺术家简介、创作理念、创作媒介、创作年代等信息。
                    </p>
                    <div class="modal-info">
                        <div class="info-item">
                            <i class="fas fa-user"></i>
                            <div class="info-content">
                                <h4>艺术家</h4>
                                <p id="modalArtist">李明</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-calendar-alt"></i>
                            <div class="info-content">
                                <h4>创作年代</h4>
                                <p id="modalYear">2024</p>
                            </div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-palette"></i>
                            <div class="info-content">
                                <h4>创作媒介</h4>
                                <p id="modalMedium">摄影</p>
                            </div>
                        </div>
                    </div>
                    <div class="modal-actions">
                        <button class="btn-primary">分享作品</button>
                        <button class="btn-secondary">收藏作品</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const hamburger = document.querySelector('.hamburger');
            const navLinks = document.querySelector('.nav-links');
            const navbar = document.querySelector('.navbar');
            const filterTabs = document.querySelectorAll('.filter-tab');
            const galleryItems = document.querySelectorAll('.gallery-item');
            const modal = document.getElementById('artworkModal');
            const closeModal = document.getElementById('closeModal');
            const modalImage = document.getElementById('modalImage').querySelector('img');
            const modalTitle = document.getElementById('modalTitle');
            const modalCategory = document.getElementById('modalCategory');
            const modalDescription = document.getElementById('modalDescription');
            const modalArtist = document.getElementById('modalArtist');
            const modalYear = document.getElementById('modalYear');
            const modalMedium = document.getElementById('modalMedium');

            // 汉堡菜单切换
            hamburger.addEventListener('click', function() {
                navLinks.classList.toggle('active');
                hamburger.classList.toggle('active');
            });

            // 点击导航链接关闭菜单
            const links = document.querySelectorAll('.nav-links a');
            links.forEach(link => {
                link.addEventListener('click', () => {
                    navLinks.classList.remove('active');
                    hamburger.classList.remove('active');
                });
            });

            // 滚动时导航栏变化
            window.addEventListener('scroll', function() {
                if (window.scrollY > 50) {
                    navbar.classList.add('scrolled');
                } else {
                    navbar.classList.remove('scrolled');
                }
            });

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    if(targetId !== '#') {
                        const targetElement = document.querySelector(targetId);
                        if(targetElement) {
                            window.scrollTo({
                                top: targetElement.offsetTop,
                                behavior: 'smooth'
                            });
                        }
                    }
                });
            });

            // 过滤标签切换
            filterTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const filter = this.getAttribute('data-filter');
                    
                    // 更新活动标签
                    filterTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 过滤作品
                    galleryItems.forEach(item => {
                        if (filter === 'all' || item.getAttribute('data-category') === filter) {
                            item.style.display = 'block';
                            // 添加淡入动画
                            setTimeout(() => {
                                item.style.opacity = '1';
                                item.style.transform = 'scale(1)';
                            }, 50);
                        } else {
                            // 添加淡出动画
                            item.style.opacity = '0';
                            item.style.transform = 'scale(0.8)';
                            setTimeout(() => {
                                item.style.display = 'none';
                            }, 300);
                        }
                    });
                });
            });

            // 画廊项目点击事件 - 打开模态框
            galleryItems.forEach(item => {
                item.addEventListener('click', function() {
                    const imageSrc = this.querySelector('img').src;
                    const title = this.querySelector('.gallery-item-title').textContent;
                    const category = this.querySelector('.gallery-item-category').textContent;
                    const description = this.querySelector('.gallery-item-description').textContent;
                    
                    // 设置模态框内容
                    modalImage.src = imageSrc;
                    modalTitle.textContent = title;
                    modalCategory.textContent = category;
                    modalDescription.textContent = description;
                    
                    // 根据作品类别设置艺术家等信息
                    if (category === '摄影作品') {
                        modalArtist.textContent = '李明';
                        modalYear.textContent = '2023';
                        modalMedium.textContent = '数码摄影';
                    } else if (category === '绘画作品') {
                        modalArtist.textContent = '王建国';
                        modalYear.textContent = '2024';
                        modalMedium.textContent = '水彩/油画';
                    } else if (category === '数字艺术') {
                        modalArtist.textContent = 'Sarah Johnson';
                        modalYear.textContent = '2023';
                        modalMedium.textContent = '数字生成艺术';
                    } else if (category === '雕塑作品') {
                        modalArtist.textContent = '王建国';
                        modalYear.textContent = '2022';
                        modalMedium.textContent = '不锈钢';
                    } else if (category === '装置艺术') {
                        modalArtist.textContent = 'Emma Thompson';
                        modalYear.textContent = '2024';
                        modalMedium.textContent = '混合媒介';
                    }
                    
                    // 显示模态框
                    modal.style.display = 'block';
                    // 防止页面滚动
                    document.body.style.overflow = 'hidden';
                });
            });

            // 关闭模态框
            closeModal.addEventListener('click', function() {
                modal.style.display = 'none';
                // 恢复页面滚动
                document.body.style.overflow = 'auto';
            });

            // 点击模态框外部关闭
            window.addEventListener('click', function(event) {
                if (event.target === modal) {
                    modal.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            });

            // 订阅表单提交
            const subscribeForm = document.querySelector('.subscribe-form');
            if (subscribeForm) {
                subscribeForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    alert('感谢您的订阅！我们将定期为您发送最新展览信息。');
                    this.reset();
                });
            }

            // 展览预约按钮
            const reserveButtons = document.querySelectorAll('.exhibition-actions .btn-primary');
            reserveButtons.forEach(button => {
                button.addEventListener('click', function() {
                    alert('预约功能即将上线，敬请期待！');
                });
            });
        });
    </script>
</body>
</html>